<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>zxj2022 在线 OJ 系统</title>
    <meta name="description" content="Charcoal is a free Bootstrap 4 UI kit build by @attacomsian at Wired Dots."/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Bootstrap 4-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-expand-md navbar-dark fixed-top sticky-navigation">
    <a class="navbar-brand font-weight-bold" href="#">zxj2022</a>
</nav>

<!--hero section-->
<section class="bg-hero">
    <div class="container">
        <div class="row vh-100">
            <div class="col-sm-12 my-auto text-center">
                <h1>OJ 系统</h1>
                <p class="lead text-capitalize my-4">
                    基于 Spring 框架和 jQuery 写的 OJ 系统
                </p>
                <a href="https://gitee.com/zxj2022/java_spring_project/tree/master/oj-spring"
                   class="btn btn-outline-light btn-radius btn-lg">源代码获取地址</a>
            </div>
        </div>
    </div>
</section>

<!--components-->
<section class="my-5 pt-5">
    <div class="container">
        <!-- Brand color  -->


        <!-- Links  -->

        <!-- Grid  -->


        <!-- Fonts  -->

        <!-- Buttons  -->

        <!-- Forms  -->

        <!-- Dropdown  -->

        <!-- Navs  -->

        <!-- Navbar  -->

        <!-- Tables  -->
        <div class="row mb-5" id="tables">
            <div class="col-sm-12">
                <div class="mt-3 mb-5">
                    <h3>题目列表</h3>
                    <table class="table">
                        <thead class="thead-dark">
                        <tr>
                            <th>序号</th>
                            <th>标题</th>
                            <th>难度</th>
                        </tr>
                        </thead>
                        <tbody id = "problemTable">
<!--                        <tr>-->
<!--                            <td>3</td>-->
<!--                            <td>-->
<!--                                <a href="#">-->
<!--                                    背包问题-->
<!--                                </a>-->
<!--                            </td>-->
<!--                            <td>困难</td>-->
<!--                        </tr>-->
<!--                        </tbody>-->
                    </table>
                </div>
            </div>
        </div>

        <!-- Pagination  -->

        <!-- Jumbotron  -->

        <!-- Cards  -->

        <!-- Tooltip  -->

        <!-- Popovers  -->

        <!-- Badges  -->

        <!-- Modals  -->

        <!-- Alerts  -->

        <!-- Progress bars  -->

        <!-- List group  -->

        <!-- Image thumbnails  -->

        <!-- Figures  -->

        <!-- Breadcrumbs  -->

        <!-- Carousel  -->

        <!-- Close  -->

        <!-- Code -->
    </div>
</section>

<!--footer-->
<section class="py-5 bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3 col-sm-8 offset-sm-2 col-xs-12 text-center">
                <!-- <h3>Upgrade to Pro Version</h3>
                <p class="pt-2">
                    We are working on <b>Charcoal Pro</b> which will be released soon. The pro version
                    will have a lot more components, sections, icons, plugins and example pages.
                    Join the waiting list to get notified when we release it (plus discount code).
                </p>
                <a class="btn btn-warning" href="https://wireddots.com/newsletter">Join Waiting List</a>
                <hr class="my-5"/> -->
                <p class="pt-2 text-muted">
                    &copy; by zxj2022
                </p>
            </div>
        </div>
    </div>
</section>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>-->
<script src="js/app.js"></script>
<script>
    // 在页面加载的时候, 尝试从服务获取题目列表信息, 通过 ajax 的方式获取
    function getProblems() {
        $.ajax({
            url: "/oj/getProblem",
            type: "GET",
            success: function (result) {
                console.log(result);
                if (result != null && result.code == 200 && result.data != null) {
                    console.log('1111');
                    let problems = result.data;
                    // 把获取到的数据构造成 Html 片段
                    let problemTable = document.querySelector("#problemTable");
                    for (let problem of problems) {
                        let tr = document.createElement("tr");

                        let tdId = document.createElement("td");
                        tdId.innerHTML = problem.id;
                        tr.appendChild(tdId);

                        let tdTile = document.createElement("td");
                        let a = document.createElement("a");
                        a.innerHTML = problem.title;
                        a.href = 'problemDetail.html?id=' + problem.id;
                        a.target = '_blank';
                        tdTile.appendChild(a);
                        tr.appendChild(tdTile);

                        let tdLevel = document.createElement("td");
                        tdLevel.innerHTML = problem.level;
                        tr.appendChild(tdLevel);

                        problemTable.appendChild(tr);
                    }
                }
            }
        });
    }

    getProblems();

</script>
</body>
</html>
